<template>
  <div class="container">
    <div class="line">
      <div class="block" style="width: calc(50% - 10px);margin-right: 20px">
        <details-gc />
        <details-process />
        <details-diskspace />
      </div>
      <details-threads style="width: calc(50% - 10px)" />
    </div>
    <div class="line">
      <details-memory type="heap" style="width: calc(50% - 10px);margin-right: 20px" />
      <details-memory type="nonheap" style="width: calc(50% - 10px)" />
    </div>
  </div>
</template>

<script setup>
import DetailsGc from "./details-gc.vue";
import DetailsProcess from "./details-process.vue";
import DetailsDiskspace from "./details-diskspace.vue";
import DetailsThreads from "./details-threads.vue";
import DetailsMemory from "./details-memory.vue";
</script>

<style scoped>
.container {
  padding: 20px;
  overflow: auto;
  height: calc(100% - 40px);
}
.line {
  display: flex;
  flex-direction: row;
}
</style>